<template>
    <div>

<!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item>快速挂号</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="height: 550px">
         <el-row :gutter="20">
            <el-col :span="8">
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">内科</span>
                  
                    </template>
                    <!-- <el-tag type="success" effect="plain" class="tag2">肾内科</el-tag>
                    <el-tag type="success" effect="plain" class="tag2">心血管内科</el-tag> -->
                        <el-button size="small" round type="primary" plain class="button" @click="choose(3)">内分泌科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(4)">心血管内科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(5)">血液内科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(6)">呼吸内科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(7)">肾内科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(8)">消化内科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(9)">综合医疗科</el-button>
                </el-collapse-item>
                <el-collapse-item >
                     <template slot="title" ><span class="title1">外科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(10)">泌尿外科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(12)">胃肠外科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(14)">骨科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(11)">肝胆胰外科</el-button>
                       
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">妇产科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(16)">妇产科</el-button>
                        <!-- <el-button size="small" round type="primary" plain class="button">产科</el-button> -->
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">儿科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(19)">儿科</el-button>
                        <!-- <el-button size="small" round type="primary" plain class="button">新生儿科</el-button> -->
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">五官科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(22)">耳鼻喉科</el-button>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(23)">眼科</el-button>
                </el-collapse-item>
                </el-collapse>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="8" style="margin-left: 50px">
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">肿瘤科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(25)">肿瘤科</el-button>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">口腔科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(27)">口腔科</el-button>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">病理科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(29)">病理科</el-button>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">神经科</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(31)">神经内科</el-button>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title" ><span class="title1">非临床科室</span>
                    <!-- <i class="header-icon el-icon-info"></i> -->
                    </template>
                        <el-button size="small" round type="primary" plain class="button" @click="choose(33)">超声影像科</el-button>
                </el-collapse-item>
            </el-collapse>
            </el-col>
         </el-row>
        
        </el-card>
    </div>

</template>

<script>
import {chooseDoctor} from '../../api/users'
import {store} from '../../store/index'

export default {
    name: 'Register',
    data() {
        return {
            department_id: '',

        }   
    },
    methods: {
       async choose(department_id) {
        const { data:res } = await chooseDoctor(department_id)
        // console.log(res,this.$store.state.doctors_name_res)
        if(res.code === 200) {
            this.$store.state.doctors_name_res = res.data.doctors;
            console.log("哈哈",this.$store.state.doctors_name_res)
             this.$router.push('/doctor');
        }
            
        },

    },
}
</script>

<style>
.title1 {
    font-family:"Microsoft YaHei";
    font-weight: 400;
    font-size: 5.5mm;
}

.button {
    padding-bottom: 10px;
    margin-top: 20px;
    margin-left: 10px;
}

</style>